<template>
    <div class="detail_module_panel other_info">
        <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">
            {{$t('salesManage.salesRecord')}}
            <el-button @click="querySMSRecord(1)" style="margin-left: 16px" type="primary" size="mini">{{ $t('common.msgRecord') }}</el-button>
        </h3>
        <div class="panel_info_content">
            <el-table :data="tableData" style="width: 100%">
                <!-- 记录时间 -->
                <el-table-column align="left" :label="$t('salesManage.recordTime')" prop="createTime" width="180">
                    <template slot-scope="{ row }">{{ row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <!-- 电销员 -->
                <el-table-column align="left" prop="salesmanName" width="180" :label="$t('salesManage.salesman')">
                </el-table-column>
                <!-- 联络结果 -->
                <el-table-column align="left" prop="contactResult" :label="$t('collection.contactResult')"
                                 min-width="120">
                    <template slot-scope="{ row }">{{ row.contactResult | contactResult }}</template>
                </el-table-column>
                <!-- 电销结果 -->
                <el-table-column align="left" prop="salesResult" :label="$t('salesManage.salesResult')" min-width="120">
                    <template slot-scope="{ row }">{{ row.salesResult | salesResult }}</template>
                </el-table-column>
                <!-- 下载跟进时间/原因 -->
                <el-table-column align="left" prop="nextFollowTime" :label="$t('salesManage.nextFollowTimeAndReason')" min-width="180">
                    <template slot-scope="{ row }">
                        <span v-if="row.salesResult===1">{{ row.nextFollowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
                        <span v-else-if="row.salesResult===2">{{ row.unfollowReason | unfollowReason }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <!-- 备注 -->
                <el-table-column prop="remark" :label="$t('common.remark')" min-width="80" :show-overflow-tooltip="true">
                    <template slot-scope="{ row }">{{!row.remark ? '--' : row.remark}}</template>
                </el-table-column>
                <!-- 操作 -->
<!--                <el-table-column align="center" prop="answerList" :label="$t('common.operation')" min-width="100">
                    &lt;!&ndash; 查看 &ndash;&gt;
                    <template slot-scope="{ row }">
                        <el-button type="text" @click="checkStateDetail(row)" v-if="row.contactResult==1">{{ $t('common.check') }}</el-button>
                        <span v-else>&#45;&#45;</span>
                    </template>
                </el-table-column>-->
            </el-table>
            <!-- <pagination @pageChange="pageChange" :page="page">分页组件</pagination> -->
        </div>
        <!--话术详情start-->
        <el-dialog :visible.sync="showSateDetail" width="400px" :title="$t('salesManage.speechDetails')">
            <div v-for="(item,index) in speechDetails" :key="index" style="" class="mb10">
                <p class="word-wrap">{{item.question}}</p>
                <p class="word-wrap"> {{ answerJoin(item.answer) }}</p>
            </div>

        </el-dialog>
        <!--话术详情end-->

        <!--短信记录-->
        <el-dialog :title="$t('common.msgRecord')" :visible.sync="showSMSRecord">
            <el-table :data="SMSData">
                <!--发送时间-->
                <el-table-column prop="createTime" :label="$t('common.sendTime')"></el-table-column>
                <!--短信内容-->
                <el-table-column prop="content" :label="$t('common.SMSContent')" show-overflow-tooltip></el-table-column>
                <!--发送状态-->
                <el-table-column prop="sendStatus" :label="$t('common.sendStatus')">
                    <template slot-scope="{row}">{{ row.sendStatus | SMSStatusSwitch }}</template>
                </el-table-column>
                <!--电销员-->
                <el-table-column prop="operator" :label="$t('salesManage.salesman')"></el-table-column>
            </el-table>
            <div class="page_wrap">
                <el-pagination v-if="SMSPage.recordsTotal" background @current-change="querySMSRecord" :current-page="SMSPage.currentPage" :page-size="SMSPage.pageSize" layout="total, prev, pager, next, jumper" :total="SMSPage.recordsTotal"></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import telOptList from './tel-opt-list';
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/index';

    let that = null;
    export default {
        name: 'telRecord',
        components: {
        },
        mixins: [mixin, telOptList],
        props: {
            userData: {
                type: Array,
                default() {
                    return [];
                },
            }
        },
        data() {
            return {
                userId: '',
                orderId: '',
                repayScheduleId: '',
                stateDetail: [],
                showSateDetail: false,
                speechDetails: '',
                query: {
                    telUserId: ''
                },
                tsRecord: {
                    id: '',
                    telUserId: '',
                    batchId: '',
                    contactResult: '',
                    salesResult: '',
                    nextFollowTime: '',
                    unfollowReason: '',
                    agreeTime: '',
                    remark: '',
                    answers: '',
                    salesmanId: '',
                    salesmanName: '',
                    salesmanGroupId: '',
                    salesmanGroupName: '',
                    createTime: '',
                    updateTime: '',
                    isReject: ''

                },
                showSMSRecord: false,
                SMSData: [], // 短信记录
                SMSPage: {
                    currentPage: 1,
                    pageSize: 10,
                    recordsTotal: 0,
                },
            };
        },
        methods: {
            answerJoin(answer) {
                return ((answer.length > 0 && answer[0] == '') || (answer.length == 0)) ? '--' : answer.join('/');
            },
            // 订单具体信息
            getTableData() {
                // 获取电核记录
                this.$api.telSales.queryUserRecord({telUserId: this.query.telUserId}).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.$set(this, 'tableData', data)
                    }
                });
            },
            // 查询话术详情
            checkStateDetail(row) {
                this.showSateDetail = true;

                this.speechDetails = row.answerList;
            },
            listenEvent() {
                EventBus.$on(eventConf.UPDATETELSALESRECORDS, () => {
                    this.getTableData({currentPage: 1});
                });
            },
            // 查询短信记录
            querySMSRecord(currentPage) {
                // const userInfo = this.userData[0] || {};
                const batchCode = this.$route.query.batchCode || '';
                const page = this.SMSPage;
                const params = {
                    pageSize: page.pageSize,
                    // phone: userInfo.phone,
                    pageNo: currentPage || page.currentPage,
                    batchCode,
                    smsWay: 'tel',
                    telUserId: this.query.telUserId,
                };
                this.$api.sms.selectSmsManualRecordParams(params).then(res => {
                    const { status, data } = res;
                    if ('1' === status && data) {
                        this.SMSData = data.list;
                        this.showSMSRecord = true;
                        this.SMSPage.recordsTotal = data.total;
                        this.SMSPage.currentPage = data.pageNum;
                    }
                });
            },
        },
        created() {
            that = this;
            if (this.$route.params.telUserId) {
                this.query.telUserId = this.$route.params.telUserId;
                this.getTableData();
                this.listenEvent();
            }
        },
        filters: {
            contactResult(type) {
                let result = '--';
                that.telOptList.telFeedBack.forEach(item => {
                    if (item.value === +type) {
                        result = item.label;
                    }
                });
                return result;
            },
            salesResult(type) {
                let result = '--';
                that.telOptList.salesResult.forEach(item => {
                    if (item.value === +type) {
                        result = item.label;
                    }
                });
                return result;
            },
            unfollowReason(type) {
                let result = '--';
                that.telOptList.reasonList.forEach(item => {
                    if (item.value === +type) {
                        result = item.label;
                    }
                });
                return result;
            },
            SMSStatusSwitch(type) {
                // 发送状态：0 待发送  1 已发送  2 发送成功  3 发送失败
                switch (type) {
                    case 0:
                        return that.$t('common.SMSPending');
                    case 1:
                        return that.$t('common.SMSHasSend');
                    case 2:
                        return that.$t('common.SMSSendSuccess');
                    case 3:
                        return that.$t('common.SMSSendFailed');
                    default:
                        return '--';
                }
            },
        }
    };
</script>

<style lang="scss" scoped>
    .word-wrap {
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .video {
        background-color: rgba(0, 0, 0, 0.4) !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .check_loan_history {
        margin-left: 15px;
    }

    .page_wrap {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0;
    }
</style>
